<template>
  <el-container class="main-container">
    <keep-alive>
      <Header :subtitle="subtitle" :header-height="headerHeight" :cover-name="coverName" :cover-date="date" />
    </keep-alive>
    <div class="main">
      <el-row>
        <div v-loading="listLoading" class="el-col-24 el-col-md-20 main-content">
          <el-row>
            <div class="content">
              <span v-html="detail.content" />
            </div>
          </el-row>
          <el-divider />
          <div class="content-footer">
            <div class="fenlei">
              <router-link :to="`/category/${detail.cid}`">
                <i class="el-icon-fenlei" /> {{ detail.cateName }}
              </router-link>
            </div>
            <div class="tag">
              <template v-for="(tag,index) in detail.tags">
                <router-link :key="index" :to="`/tag/${tag.id}`">
                  <i class="el-icon-tag" /> {{ tag.title }}
                </router-link>
              </template>
            </div>
          </div>
        </div>
      </el-row>
    </div>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script type="text/ecmascript-6">
import Header from '../components/Header'
import Footer from '../components/Footer'
import { parseTime } from '../utils/index'
import { detail } from '../api/blog'

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      subtitle: '',
      coverName: '/cover/cover4.jpg',
      headerHeight: 70,
      date: '',
      id: 0,
      detail: {
        content: '',
        cateName: '',
        cid: 0,
        tags: [],
        addTime: 0
      },
      listLoading: true
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.listLoading = true
      detail(this.$route.params.id).then(response => {
        this.detail = response.data
        this.subtitle = this.detail.title
        document.title = response.data.title + " -- Rainfer's Blog"
        this.date = this.formatTime(this.detail.addTime)
        this.listLoading = false
      })
    },
    formatTime(time) {
      // 星期六, 五月 4日 2019, 1:30 凌晨
      return parseTime(time, '星期{a}, {M}月 {d}日 {y}, {h}:{i} {T}')
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    .main-container {
        background-color: #eeeeee;

        .main {
            max-width: 1140px;
            width: 100%;
            padding: 3rem 15px;
            margin-right: auto;
            margin-left: auto;
            position: relative;
            margin-top: -3rem;
            background-color: #fff;
            border-radius: .5rem;
            z-index: 3;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;
            box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;

            .main-content {
                float: none;
                margin: auto;

                .content {
                    float: none;
                    margin: 1em auto;
                    table-layout:fixed;
                    word-break:break-all;
                    overflow:hidden;
                }

                .content-footer {
                    .fenlei {
                        &:hover {
                            color: #1abc9c
                        }
                    }

                    .tag {
                        margin-top: 1rem;

                        a {
                            margin-right: 15px;

                            &:hover {
                                color: #1abc9c
                            }
                        }
                    }
                }
            }
        }
    }
</style>
